<template>
  <div @scroll="onScrollChange" class="parallax">
    <!-- 缓慢移动区 -->
    <div :style="{top: slowTop}" class="parallax-slow">
      <slot name="parallax-slow"></slot>
    </div>
    <!-- 正常移动区 -->
    <div class="parallax-content z-index-2">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 速度差(正常移动区移动100px， 缓慢移动区 100 / 2 = 50 px)；
      SPEED_DIFF: 2,
      // 页面滑动值
      parallaxScroll: 0
    }
  },
  methods: {
    /**
     * 监听组件滑动
     */
    onScrollChange: function ($event) {
      this.parallaxScroll = $event.target.scrollTop
      this.$emit('onScrollChange', this.parallaxScroll)
    }
  },
  computed: {
    /**
     * 返回 slow 距离顶部的距离
     */
    slowTop: function () {
      // 当前页面的滑动距离 / 速度差 = 缓慢移动区应该滑动的距离
      // 当前页面的滑动距离 - 缓慢移动区应该滑动的距离 = 缓慢移动区用来缓冲掉 scroll 的值

      return (this.parallaxScroll - (this.parallaxScroll / this.SPEED_DIFF)) + 'px'
    }
  }

}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
.parallax {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  &-slow {
    width: 100%;
    position: relative;
  }
  &-content {
    width: 100%;
    position: relative;
  }
}
</style>
